<template>
  <div>
    <el-date-picker
      :editable="false"
      v-if="!isSectione"
      v-model="value"
      :type="type"
      :placeholder="'选择' + title"
      :value-format="format"
      @input="change($event)"
      :clearable="false"
    >
    </el-date-picker>

    <el-date-picker
      :editable="false"
      v-if="isSectione"
      v-model="value"
      :type="type"
      :value-format="format"
      range-separator="至"
      :clearable="false"
      :start-placeholder="'开始' + title"
      @input="change($event)"
      :end-placeholder="'结束' + title"
    >
    </el-date-picker>
  </div>
</template>

<script>
/*
单个日期： date
单个月份： month
单个年份： year
多个日期： daterange
多个月份： monthrange
多个日期+时间： datetimerange
*/
export default {
  name: "DatePicker", //时间选择器，只可以选择1个月以内的
  props: {
    type: {
      type: String,
      default: "month",
    },
  },
  data() {
    return {
      value: null,
      title: "",
      format: "",
      isSectione: false, //是否是区间
    };
  },
  created() {
    if (this.type == "month") {
      this.title = "月份";
      this.value = "";
      this.format = "yyyy-MM";
      this.isSectione = false;
    } else if (this.type == "year") {
      this.title = "年份";
      this.value = "";
      this.format = "yyyy-MM-dd";
      this.isSectione = false;
    } else if (this.type == "date") {
      this.title = "日期";
      this.value = "";
      this.format = "yyyy-MM-dd";
      this.isSectione = false;
    } else if (this.type == "week") {
      this.title = "日期";
      this.value = [];
      this.isSectione = true;
      this.format = "yyyy-MM-dd HH:mm:ss";
    } else if (this.type == "daterange") {
      this.title = "日期";
      this.value = [];
      this.format = "yyyy-MM-dd";
      this.isSectione = true;
    } else if (this.type == "monthrange") {
      this.title = "月份";
      this.value = [];
      this.format = "yyyy-MM";
      this.isSectione = true;
    } else if (this.type == "datetimerange") {
      this.title = "日期";
      this.value = [];
      this.isSectione = true;
      this.format = "yyyy-MM-dd HH:mm:ss";
    }
  },
  methods: {
    change(val) {
      this.$emit("dateSelect", val);
    },
  },
};
</script>